<template>
    <div class="good subpage">
        <my-head :title="$route.query.name"></my-head>
        <div v-if="good">
            <img :src="good.img" alt="" class="gimg">
            <van-cell-group class="goodinfo">
                <van-cell title="商品类型" :value="good.type.text"  />
                <van-cell title="商品单价" :value="good.price.toFixed(2)+'元'"  />
                <van-cell title="商品折扣" :value="good.discount+'折'"  />
                <van-cell title="购买数量"    >
                    <template #default>
                        <van-stepper  @change="changevalue" v-model.number="value" min="1" />
                    </template>
                </van-cell>
                <van-cell title="购买小计"  :value="(good.price * value * good.discount/10).toFixed(2) +'元'  "  />
            </van-cell-group>

        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="评论" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="gotocart" />
            <van-goods-action-icon icon="like-o" @click="todoLike" :text="(likeFlag?'已':'')+'点赞('+likeCount+')'" :color="likeFlag?'#ff5000':'#323233'" />
            <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addtoCart" />
            <van-goods-action-button @click="gotopay" type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
export default {
    data(){
        return {
            good:null,
            value:1,
            likeCount:0,
            likeFlag:false,
            lid:""
        }
    },
    methods:{
        addtoCart(){
            this.checkLogin(()=>{
                // 加入购物车 
                // 1. 判购物车是否存在 
                // userInfo 
                // username
                // gid 
                // good
                // count:value 
                this.$ajax.findcart({
                    username:this.userInfo.username,
                    gid:this.$route.query.id,
                   
                })
                .then(result=>{
                    if(result.length>0){
                        // 已经加入了购物车  patch 修改
                        this.$ajax.setCartOne(result[0].id,{
                            count:result[0].count + this.value
                        })
                        .then(res=>{
                            this.$toast('累计添加购物车成功')
                            console.log(res);
                        })
                        
                    }else{
                        // 没有把这个商品加入购物车  post 提交
                        this.$ajax.AddToCart({
                            username:this.userInfo.username,
                            gid:this.$route.query.id,
                            userInfo:this.userInfo,
                            count:this.value,
                            good:this.good
                        })
                        .then(res=>{
                            this.$toast('新增购物车成功')
                        })
                    }
                })
            })
           
        },
        gotopay(){
            this.checkLogin(()=>{
                this.gotoWhere({
                    name:"pay"
                })
            })
        },
        gotocart(){
            this.checkLogin(()=>{
                this.gotoWhere({
                    name:"cart"
                })
            })
        },
        todoLike(){
            this.checkLogin(()=>{
                // 进行点赞和取消点赞操作 
                if(this.likeFlag){
                    // 已经点赞 需要取消点赞 
                    this.$ajax.DeleteLikes(this.lid)
                    .then(res=>{
                        this.likeFlag = false;
                        this.likeCount--; 
                        this.$toast("取消点赞成功")
                    })
                }else{
                    // 没有点赞  要点赞 
                    // 添加数据  post 
                    this.$ajax.AddLikes({
                        userInfo:this.userInfo,
                        username:this.userInfo.username,
                        good:this.good,
                        gid:this.good.id, // 对应的这个商品的id
                        // id:this.good.id,   覆盖post 自动添加 id字段 
                    }).then(res=>{
                        this.likeFlag = true;
                        this.lid = res.id;    
                        this.likeCount++; 
                        this.$toast("点赞成功")

                    })
                }
            })
        },
        checkLogin(callback){
            if(this.userInfo){
                callback()
            }else{
                this.$dialog.confirm({
                    title: '登录提示',
                    message: '您还未登录,请先登录~',
                })
                .then(() => {
                    // on confirm
                    this.$router.push({name:"login"})
                })
                .catch(() => {
                    // on cancel
                });
            }
        },
        changevalue(value){
            if(value<1){
                this.value = 1;
            }
        },
        async getGoodOne(){
            let res = await this.$ajax.findGoods({
                id:this.$route.query.id,
            })

            //  下次 DOM 更新循环结束之后执行延迟回调 延迟执行  setTimeout 
            // 插件里面 
            this.$nextTick(()=>{
                this.good = res[0]
                this.$forceUpdate()  // 迫使 Vue 实例重新渲染 强制刷新 
            })
        },
        async checkLikeCount(){
            let res = await this.$ajax.findLikes({
                gid:this.$route.query.id,
            })
            this.$nextTick(()=>{
                this.likeCount = res.length;
            })
        },
        async checkMeHasLike(){
            if(this.userInfo){
                let res = await this.$ajax.findLikes({
                    gid:this.$route.query.id,
                    username:this.userInfo.username
                })
                this.$nextTick(()=>{
                    this.likeFlag = !!res.length;
                    if(res.length>0){
                        this.lid =res[0].id;  //可能取消点赞做准备 
                    }
                })
            }
        }
    },
    mounted(){
        this.getGoodOne()
        this.checkLikeCount()
        this.checkMeHasLike()
        
    }
}
</script>


<style lang="scss" scoped>
.good{
    .gimg{
        width:100%;
        height:256px;
    }
}
</style>